<template>
    <el-dialog
        v-model="tenantAuthAddDialogVisible"
        title="添加租户授权"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="tenantAuthDataForm" :rules="tenantAuthRules" ref="tenantAuthDataFormRef">
                <el-form-item label="租户编码" label-width="20%" prop="tenantId">
                    <el-select v-model="tenantAuthDataForm.tenantId" placeholder="租户编码" :loading="tenantInfoSearchLoading" clearable filterable remote :remote-method="tenantDataSearch">
                        <el-option :label="item.tenantId" :value="item.tenantId" v-for="item in tenantDataList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户账号" label-width="20%" prop="userId">
                    <el-select v-model="tenantAuthDataForm.userId" placeholder="用户账号" :loading="userInfoSearchLoading" clearable filterable remote :remote-method="userInfoDataSearch">
                        <el-option :label="item.userAccount" :value="item.id" v-for="item in userInfoDataList" :key="item.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(tenantAuthDataFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script name="TenantAuthAddDialog" setup lang="ts">
import {tenantAuthInfoCreate, tenantAuthInfoQuery, tenantInfoQuery} from "@/request/tenant";
import {userInfoQuery} from "@/request/user";
import {computed, defineProps, ref} from "vue";
import {useTenantAuthStore} from "@/stores/userInfo/tenantAuth";
import {FormInstance} from "element-plus";

let props = defineProps(['tenantAuthDataForm']);

let tenantAuthDataForm = computed(() => {return props['tenantAuthDataForm']})

let tenantDataList = ref([]);
let userInfoDataList = ref([]);
let tenantAuthRules = ref({
    tenantId: [{ required: true, message: '租户编码不能为空', trigger: 'blur' }],
    userId: [{ required: true, message: '用户不能为空', trigger: 'blur' }]
});
let saveLoading = ref(false);
let userInfoSearchLoading = ref(false);
let tenantInfoSearchLoading = ref(false);

let tenantAuthAddDialogVisible = computed(() => {return useTenantAuthStore().tenantAuthAddDialog});
let tenantAuthSearchData = computed(() => {return useTenantAuthStore().tenantAuthSearchData});

function cancelDialog() {
    useTenantAuthStore().resetTenantAuthAddDialog(false);
}

let tenantAuthDataFormRef = ref<FormInstance>();

function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true
    formEl.validate((valid) => {
        if (valid) {
            // 添加授权记录
            tenantAuthInfoCreate(tenantAuthDataForm.value).then(res => {
                if (res["code"] === '200') {
                    tenantAuthInfoQuery(tenantAuthSearchData.value).then(searchRes => {
                        useTenantAuthStore().resetTenantAuthDataList(searchRes.data);
                    })
                    useTenantAuthStore().resetTenantAuthAddDialog(false);
                }
                saveLoading.value = false
            }).catch(res => {
                saveLoading.value = false
            })
        }
    })
}

function userInfoDataSearch(query) {
    userInfoSearchLoading.value = true
    let param = {
        pageInfo: {
            pageIndex: 1,
            pageSize: 100
        },
        userAccount: query
    }
    userInfoQuery(param).then(res => {
        userInfoDataList.value = res.data["dataList"];
        userInfoSearchLoading.value = false
    }).catch(res => {
        userInfoSearchLoading.value = false
    })
}

function tenantDataSearch(query) {
    tenantInfoSearchLoading.value = true
    let param = {
        pageInfo: {
            pageIndex: 1,
            pageSize: 100
        },
        tenantId: query
    }
    tenantInfoQuery(param).then(res => {
        tenantDataList.value = res.data["dataList"];
        tenantInfoSearchLoading.value = false
    }).catch(res => {
        tenantInfoSearchLoading.value = false
    })
}
</script>

<style scoped lang="less">

</style>